<template>
  <div class="echartsBodys">
    <div class="echartsTop">
      <div class="titleInfo">
        <div style="display: flex">
          <div class="dot"></div>
          <span>新增客户</span>
        </div>
        <p class="level" @click="clickItem('新增客户总数')">新增客户总数：{{ userNumAll }}</p>
      </div>
      <item1 ref="item1"></item1>
    </div>
    <div class="line">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
    <div class="echartsTop">
      <div class="titleInfo">
        <div style="display: flex">
          <div class="dot"></div>
          <span>新增商机</span>
        </div>

        <p class="level" style="margin-left: 60px;"  @click="clickItem('新增商机总数')">新增商机总数：{{ checkNumAll }}</p>
      </div>
      <item2 ref="item2"></item2>
    </div>

    <pop ref="pop" @confirm="getShowDetail"></pop>
  </div>
</template>

<script>
import item1 from './item1/index.vue'
import item2 from './item2/index.vue'
import pop from '../pop/pop1'
import {
  customerGetAll,
  getOpportunities,
  getPersonMonCustomer, getPersonOpportuities
} from '@/api/home.js'

export default {
  name: 'item4Title',
  data() {
    return {
      userNumAll: 0,
      checkNumAll: 0,
    }
  },
  props: {
    objParent:
        {
          type: [Object, Array],
        }
  },
  components: {item1, item2, pop},
  methods: {
    async clickItem(item) {
      let obj = {
        name: '所有员工',
        mon: '截至本月',
      }
      if(item==='新增客户总数'){
        this.$refs.pop.getShow(obj,'新增客户统计')
      }else if(item==='新增商机总数'){
        this.$refs.pop.getShow(obj,'新增商机统计')
      }
    },
    getShowDetail() {
      console.log(111)
    },
    getDataList() {
      this.$refs.item1.getData()
      this.$refs.item2.getDataList()
    },
    getNum(n) {
      customerGetAll().then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            this.userNumAll += item.total
          })
        } else {
          console.log('报错了！！！')
        }
      }).catch(err => {
        console.log(err)
      })
      getOpportunities().then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            this.checkNumAll += item.total
          })
        } else {
          console.log('报错了！！！')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.getNum()
    // this.getDataList()
  }
}
</script>

<style lang="scss" scoped>

.echartsBodys {
  width: calc(100% - 40px);
  margin-left: 20px;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .echartsTop {
    position: relative;
    width: 100%;
    height: calc(50% - 10px);
  }
}

.line {
  width: 100%;
  height: 1px;
  background: rgba(34, 72, 133, 1);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .dot1 {
    width: 4px;
    height: 3px;
    background: #1695CC;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    left: 0;
  }

  .dot2 {
    width: 4px;
    height: 3px;
    background: #1695CC;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: absolute;
    right: 0;
  }
}

.titleInfo {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  z-index: 100;

  .level {
    color: rgba(184, 204, 255, 1);
    top: 0;
    left: 10px;
    cursor: pointer;
    font-size: 16px;
    color:#fff
  }

  .dot {
    background: #00ffff;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin: auto;
  }

  span {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 8px;
    background: url("./assets/titlebg.png") center bottom no-repeat;
    background-size: 103px 20px;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
}
</style>
